import React, { Suspense, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Image, ProgressBar, Button, Toast, Skeleton } from "antd-mobile";
import isLogin from "@/utils/isLogin";
import {
  Await,
  useAsyncValue,
  useLoaderData,
  useNavigate,
} from "react-router-dom";
import { ApiHome } from "@/utils/api";

type Props = {};

export default function index({}: Props) {
  const loaderData = useLoaderData();
  // console.log(loaderData.getHomeData);

  const navigate = useNavigate();
  // const [data, setData] = useState<homeData>();
  // const getHomeData = async () => {
  //   let res = await ApiHome();
  //   setData(res.data);
  // };
  useEffect(() => {
    if (!isLogin()) {
      Toast.show({
        icon: "fail",
        content: "请先登录！",
        afterClose() {
          navigate("/login");
        },
      });
    } else {
      // getHomeData();
    }
  }, []);
  return (
    <Suspense
      fallback={
        <>
          <Skeleton.Title animated />
          <Skeleton.Paragraph lineCount={50} animated />
        </>
      }
    >
      <Await children={<Child />} resolve={(loaderData as any).getHomeData()} />
    </Suspense>
  );
}

function Child() {
  const data = useAsyncValue() as homeData;
  return (
    <div className={styles.container}>
      {/* 标题一 */}
      <div className="yt_home_title1">
        <div className="yt_home_title1_bigText">{data?.exam.title}</div>
        <div className="yt_home_title1_smallText">切换考试科目</div>
      </div>
      {/* 欢迎 */}
      <div className="yt_home_welcom_area">
        <div className="yt_home_welcom_area_title">
          欢迎Tomato来到XX学习库！
        </div>
        <div className="yt_home_welcom_area_main">
          <div className="yt_home_welcom_area_main_img">
            <Image src="/images/home/xiaolang.png"></Image>
          </div>
          <div className="yt_home_welcom_area_bar">|</div>
          <div className="yt_home_welcom_area_questions">
            <div className="yt_home_welcom_area_questions_item1">
              <div className="yt_home_welcom_area_questions_item_top">
                已学{data?.study}题
              </div>
              <div className="yt_home_welcom_area_questions_item_number">
                {data?.wrong}
              </div>
              <div className="yt_home_welcom_area_questions_item_error">
                错题
              </div>
            </div>
            <div className="yt_home_welcom_area_questions_item2 ">
              <div className="yt_home_welcom_area_questions_item_top">
                共{data?.exam.itemCount}题
              </div>
              <div className="yt_home_welcom_area_questions_item_number">
                {data?.collect}
              </div>
              <div className="yt_home_welcom_area_questions_item_error">
                收藏
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* 练习 */}
      <div className="yt_home_practice_area">
        <div className="yt_home_practice_area_item1">
          <Image src="/images/home/examination.png"></Image>
        </div>
        <div className="yt_home_practice_area_item2">
          <Image src="/images/home/books.png"></Image>
        </div>
        <div className="yt_home_practice_area_item3">
          <Image src="/images/home/practice.png"></Image>
        </div>
      </div>
      {/* 学科 */}
      <div className="yt_home_subject_area">
        <div className="yt_home_title1">
          <div className="yt_home_title1_bigText">学科题库</div>
          <div className="yt_home_title1_everyday ">坚持每一天，成长看得见</div>
        </div>
        <div className="yt_home_subject_area_main">
          {data?.exemItems.map((item, index) => {
            return (
              <div key={index} className="yt_home_subject_area_main_item">
                <div className="yt_home_subject_area_main_item_img">
                  <Image src="/images/home/subject.png"></Image>
                </div>
                <div className="yt_home_subject_area_main_item_subject">
                  <div className="yt_home_subject_area_main_item_subject_title">
                    {item.title}
                  </div>
                  <div className="yt_home_subject_area_main_item_subject_num">
                    {item.itemCount}/{item.itemCount}题
                  </div>
                  <div className="yt_home_subject_area_main_item_subject_temp">
                    <ProgressBar percent={100} />
                  </div>
                </div>
                <div className="yt_home_subject_area_main_item_practice">
                  <Button color="primary">练习</Button>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
interface homeData {
  exam: Exam;
  exemItems: ExemItem[];
  collect: number;
  wrong: number;
  study: number;
}

interface ExemItem {
  id: number;
  pid: number;
  businessLevel?: any;
  numberLevel: number;
  title: string;
  info: string;
  actionCode: string;
  actionType: string;
  actionName: string;
  createTime: string;
  updateTime?: string;
  invalid: number;
  sort: number;
  createUser: string;
  tenantId?: any;
  itemCount: number;
}

interface Exam {
  id: number;
  pid?: any;
  businessLevel?: any;
  numberLevel: number;
  title: string;
  info: string;
  actionCode: string;
  actionType: string;
  actionName: string;
  createTime: string;
  updateTime: string;
  invalid: number;
  sort: number;
  createUser: string;
  tenantId?: any;
  itemCount: number;
}
